<template>
  <div>
    <el-table :data="userList" stripe border>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="mobile" label="电话"></el-table-column>
      <el-table-column prop="role_name" label="角色"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            @change="userstateChanged(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialogo(scope.row.id)"
          ></el-button>
          <!-- 分配角色 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="分配角色"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="warning"
              icon="el-icon-coordinate"
              size="mini"
              @click="showAddRolesDialogo(scope.row)"
            ></el-button>
          </el-tooltip>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="deleteUser(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改用户对话框 -->
    <user-edit-dialogo ref="editDialogo" :editForm="editForm" />
    <!-- 添加角色对话框 -->
    <roles-add-dialogo ref="addRoles" :userInfo="userInfo" :rolesList="rolesList" />
  </div>
</template>

<script>
import RolesAddDialogo from './RolesAddDialogo.vue'
import UserEditDialogo from './UserEditDialogo'

export default {
  components: { UserEditDialogo, RolesAddDialogo },
  name: 'UserTable',
  data() {
    return {
      editForm: {},
      userInfo: {},
      rolesList:[]
    }
  },
  props: {
    userList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    //显示修改对话框
    async showEditDialogo(id) {
      this.$refs.editDialogo.editdialogVisible = true
      const { data: res } = await this.$http.get('users/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error('请求失败')
      }
      this.editForm = res.data
      console.log(this.editForm)
    },
    //保存状态
    async userstateChanged(userInfo) {
      console.log(userInfo)
      const { data: res } = await this.$http.put(
        `users/${userInfo.id}/state/${userInfo.mg_state}`
      )
      if (res.meta.status !== 200) {
        userInfo.mg_state = !userInfo.mg_state
        return this.$message.error('更新用户状态失败')
      } else {
        this.$message.success('更新用户状态成功')
      }
    },
    //删除操作
    async deleteUser(id) {
      //提示框
      const result = await this.$confirm(
        '此操作将永久删除该用户, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).catch(err => err)
      if (result === 'cancel') {
        return this.$message.info('已取消删除操作')
      } else {
        const { data: res } = await this.$http.delete('users/' + id)
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.error('删除失败')
        } else {
          this.$message.success('删除成功')
          this.$parent.$parent.getqueryUsers()
        }
      }
    },
    // 显示添加角色对话框
    async showAddRolesDialogo(userInfo) {
      this.userInfo = userInfo

      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }

      this.rolesList = res.data

      this.$refs.addRoles.showRolesAdd = true
    },
  },
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 15px;
}
</style>